<!--
 * 功能：
 * 作者： caihan
 * 日期:  2021-8-13 1:48:43 ?F10: PM?
 -->
<template>
	<view class="wrap-main">
		<!-- 顶部悬浮布局 -->
		<view class="fixed-top">
			<uni-nav-bar title="公众号" :statusBar="true" :border="false" @getUniNavBarHeightPx="getUniNavBarHeightPx">
			</uni-nav-bar>
			<u-tabs-swiper ref="tabs" :list="chapters" name="name" :current="current" @change="changeTab"
				swiperWidth="750" @getUTabsSwiperHeightPx="getUTabsSwiperHeightPx">
			</u-tabs-swiper>
		</view>

		<swiper class="swiper-box" :style="swiperStyle" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<block v-for="(item,index) in chapters" :key="index">
				<swiper-item class="swiper-item">
					<wxarticle-list :chaptersId="item.id" :i="index" :index="swiperCurrent"></wxarticle-list>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	export default {
		components: {},
		data() {
			return {
				current: 0,
				swiperCurrent: 0,
				navBarHeightPx: 44,
				tabsSwiperHeightPx: 40,
				chapters: []
			}
		},
		computed: {
			//计算属性
			swiperStyle() {
				let top = this.navBarHeightPx + this.tabsSwiperHeightPx
				let height = systemInfo.windowHeight - top
				return `height: ${height}px;margin-top: ${top}px;`
			}
		},
		onBackPress() {
			uni.hideKeyboard();
		},
		onLoad: function(options) {
			this.requestWxarticleChapters();
		},
		onShow: function() {
			// #ifdef APP-NVUE || APP-PLUS
			if (systemInfo.platform == "android") {
				plus.navigator.setStatusBarStyle("dark")
			}
			// #endif
		},
		methods: {
			getUniNavBarHeightPx: function(heightPx) {
				this.navBarHeightPx = heightPx
			},
			getUTabsSwiperHeightPx: function(heightPx) {
				this.tabsSwiperHeightPx = heightPx
			},
			// tab栏切换
			changeTab: function(index) {
				this.swiperCurrent = index;
			},
			transition: function({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish: function({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			requestWxarticleChapters: function() {
				this.$showLoadingView();
				this.$http.get('/wxarticle/chapters/json')
					.then(res => {
						// {
						// 	"children": [],
						// 	"courseId": 13,
						// 	"id": 408,
						// 	"name": "鸿洋",
						// 	"order": 190000,
						// 	"parentChapterId": 407,
						// 	"userControlSetTop": false,
						// 	"visible": 1
						// }
						this.chapters = res
						uni.hideLoading();
					}).catch(err => {
						uni.hideLoading();
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-main {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
